import React, { Component } from 'react';
import { connect } from 'react-redux'
import { fetch,save,del } from '../../redux/product.redux'
import { Table,Row,Col,Form,Button,Modal,Input,Upload,Icon,message } from 'antd'
import { Route,Link } from 'react-router-dom'
import ProductForm from './productForm';

@connect(state=>state.product, {fetch,save,del})
class Product extends Component {

    state={
        formTitle:'',
        formShow:false,
        formData:{}
    }

    columns() {
        return [{
            title:'名称',
            dataIndex:'proName',
            key:'proName'
        },{
            title:'商品编码',
            dataIndex:'number',
            key:'number',
        },{
            title:'条形码',
            dataIndex:'barcode',
            key:'barcode',
        },{
            title:'商品单位',
            key:'unit',
            dataIndex:'unit'
        },{
            title:'类型',
            key:'catalog',
            dataIndex:'catalog'
        },{
            title:'品牌价格',
            key:'brand_price',
            dataIndex:'brand_price'
        },{
            title:'机构',
            key:'agency',
            dataIndex:'agency'
        },{
            title:'规格',
            key:'packageName',
            dataIndex:'packageName'
        },{
            title:'规格价格',
            key:'packagePrice',
            dataIndex:'packagePrice'
        },{
            title:'库存数量',
            key:'count',
            dataIndex:'count'
        },{
            title:'状态',
            key:'status',
            dataIndex:'status',
            render:(text)=>text==1?<span>正常</span>:<span>已下架</span>
        },{
            title:'操作',
            key:'action',
            render:(text,record)=>{
                return (
                    <div>
                        <a href="javascript:void();" onClick={()=>this.editHandle(record)} style={{marginRight:25}} >编辑</a>
                        <a href="javascript:void();" onClick={()=>this.removeHandle(record)} >删除</a>
                    </div>
                )
            }
        }]
    }

    componentDidMount() {
        this.props.fetch()
    }

    addHandle=()=>{
        this.props.history.push(this.props.match.path+'/product-form/0')
    }

    formChange=(name,value)=>{
        this.setState({formData: {...this.state.formData, [name]:value}})
    }

    formSubmit=()=>{
        this.props.save(this.state.formData)
    }

    editHandle=(data)=>{
        this.props.history.push(this.props.match.path+'/product-form/'+data.proId)
    }

    removeHandle=(data)=>{
        Modal.confirm({
            title:'确认删除',
            content:'确认删除:'+data.name,
            onOk:()=>{
                this.props.del(data.id)
            }
        })
    }

    render() {
        return (
            <div>
                <Row>
                    <Col span={12}>
                        <Button type="primary" onClick={this.addHandle}>新增</Button>
                    </Col>
                </Row>
                <Table
                    columns={this.columns()}
                    loading={this.props.loading}
                    dataSource={this.props.data}
                    pagination={this.props.pagination}
                />
                
            </div>
        )
    }
}

export default Product